<template>
  <el-upload :action="uploadUrl"
             ref="upload"
             :on-success="uploadSuccess"
             :before-upload="beforeUpload"
             :on-error="uploadError"
             name="file"
             :show-file-list="false"
             :headers="headers"
             :data="{configName: configName}"
             :limit="limit"
             :accept="fileAccept"
             :disabled="uploadDisabled">
    <el-button :size="btnSize"
               type="primary"
               plain
               :disabled="uploadDisabled">{{btnName}}</el-button>
  </el-upload>
</template>

<script>
import { getToken } from "@/utils/auth";
import { fullLoadingMinxin } from '@/mixins/fullLoadingMinxin.js';
export default {
  name: 'UploadSingleFile',
  props: {
    // 模块名称
    configName: {
      type: String,
      default: '模块名称'
    },
    fileAccept: {
      type: String,
      default: ''
    },
    uploadDisabled: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    },
    btnName: {
      type: String,
      default: '附件'
    },
    btnSize: {
      type: String,
      default: 'small'
    }
  },
  mixins: [fullLoadingMinxin],
  data() {
    return {
      uploadUrl: "/zy-api/commonPath/outfallReplyUpload", // 上传文件服务器地址
      headers: { Authorization: getToken() },
    }
  },
  methods: {
    // 上传前验证文件格式
    beforeUpload(file) {
      /* const isImage = (file.type === 'image/jpeg') || (file.type === 'image/png');
      if (!isImage) {
        this.$message.error('上传图片只能是【JPG】或者【PNG】格式!');
      }
      if (isImage) {
        this.openFullLoading(); // 打开全屏loading
      }
      return isImage; */
      this.openFullLoading(); // 打开全屏loading
    },
    // 上传成功回调
    uploadSuccess(res) {
      /* let { status, errors, url } = res;
      if (status == 200) {
        this.$emit('upload-success', url)
        this.$message.success('上传文件成功');
      } else {
        this.msgError(`错误${status}：${errors[0].message}`)
      } */
      this.$message.success('上传文件成功');
      // console.log('上传文件地址：', res);
      this.$emit('upload-success', res);
      this.$refs.upload.clearFiles(); // 清除文件
      this.closeFullLoading();
    },
    // 上传失败回调
    uploadError(err) {
      console.log(err);
      this.msgError(`上传文件失败`);
      this.$refs.upload.clearFiles(); // 清除文件
      this.closeFullLoading();
    },
  },
}
</script>

<style lang="scss" scoped>
</style>